<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true" label-width="130px">
                <el-form-item label="交易时间" class="piker">
					<el-date-picker
						v-model="queryParams.create_time"
						type="date"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						placeholder="请选择日期"
					/>
				</el-form-item>
				<el-form-item label="费用类型">
					<el-select
						class="w-60"
						v-model="queryParams.type"
						placeholder="请选择"
						clearable
					>
						<el-option label="全部" :value="0" />
						<el-option label="提现" :value="2"/>
						<el-option label="渠道费" :value="1"/>
                        <el-option label="平台服务费" :value="3"/>
						<el-option label="平台抵扣服务费" :value="4"/>
						<el-option label="抵扣渠道费" :value="5"/>
						<el-option label="营销费-积分" :value="6"/>
						<el-option label="抵扣转介费、平台服务费" :value="7"/>
						<el-option label="转介费、平台服务费" :value="8"/>
						<el-option label="转介费" :value="9"/>
					</el-select>
				</el-form-item>
                <el-form-item label="收支类型">
					<el-select
						class="w-60"
						v-model="queryParams.money_type"
						placeholder="请选择"
						clearable
					>
						<el-option label="全部" :value="0"/>
						<el-option label="收入" :value="1"/>
						<el-option label="支出" :value="2"/>
					</el-select>
				</el-form-item>
				<el-form-item label="交易流水号">
					<el-input
						class="w-[240px]"
						v-model="queryParams.sn"
						clearable
					/>
				</el-form-item>
                <el-form-item label="户名">
					<el-input
						class="w-[240px]"
						v-model="queryParams.account_name"
						clearable
					/>
				</el-form-item>
                <el-form-item label="账号">
					<el-input
						class="w-[240px]"
						v-model="queryParams.account"
						clearable
					/>
				</el-form-item>
				<el-form-item label="关联账号ID">
					<el-input
						class="w-[240px]"
						v-model="queryParams.user_id"
						clearable
					/>
				</el-form-item>
                <el-form-item label="对方账号(待开发)">
					<el-input
						class="w-[240px]"
						v-model="queryParams.one"
						clearable
					/>
				</el-form-item>
                <el-form-item label="对方户名(待开发)">
					<el-input
						class="w-[240px]"
						v-model="queryParams.two"
						clearable
					/>
				</el-form-item>
				<el-form-item label="关联业务单号">
					<el-input
						class="w-[240px]"
						v-model="queryParams.p_sn"
						clearable
					/>
				</el-form-item>

				<el-form-item class="w-80">
                    <el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
			</el-card>
		<el-card class="!border-none" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号" type="index" :index="indexAdd" min-width="80" />
				<el-table-column label="交易流水号" prop="sn" min-width="220" />
				<el-table-column label="费用类型" prop="money_type_name" min-width="120">
					<template #default="{ row }">
						<span>{{ row.money_type_name }}</span>
					</template>
				</el-table-column>
                <el-table-column label="金额（元）" prop="money" min-width="120" />
                <el-table-column label="收支类型" prop="name" min-width="120">
					<template #default="{ row }">
						<span v-if="row.money_type == 1">收入</span>
						<span v-if="row.money_type == 2">支出</span>
					</template>
				</el-table-column>
                <el-table-column label="户名" prop="account_name" min-width="180" />
                <el-table-column label="账号" prop="account" min-width="140" />
                <el-table-column label="余额（元）" prop="s_money" min-width="120" />
                <el-table-column label="对方行名" prop="pay_bank" min-width="160" />
                <el-table-column label="对方账号" prop="pay_account" min-width="220" />
                <el-table-column label="对方户名" prop="pay_user" min-width="200" />
                <el-table-column label="交易时间" prop="pay_time" min-width="180" />
                <el-table-column label="关联业务单号" prop="p_sn" min-width="220" >
					<template #default="{ row }">
						<!-- 提现申请 -->
						<el-link v-if="row.money_type == 2 && row.type == 2" type="primary" @click="() => {
							$router.push({ path: getRoutePath('user.money/withdrawList'), query: { sn: row.p_sn } })
						}">{{ row.p_sn }}</el-link>
						<!-- 单据管理 -->
						<el-link v-else type="primary" @click="() => {
							$router.push({ path: getRoutePath('setting.pay.payConfig/commissionOrderlists'), query: { sn: row.p_sn } })
						}">{{ row.p_sn }}</el-link>
					</template>
				</el-table-column>
                <el-table-column label="备注" prop="notice" min-width="160" />
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
	</div>
</template>
<script lang="ts" setup name="moneyLog">
	import { moneyLog} from '@/api/finance';
	import { usePaging } from '@/hooks/usePaging';
	import {getRoutePath} from '@/router';
	const route = useRoute()
	const queryParams:any = reactive({
		create_time: '',
		type: '',
		money_type: '',
		sn: '',
		account_name: '',
		account: '',
		user_id: '',
		one: '',
		two: '',
		p_sn: ''
	})
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: moneyLog,
		params: queryParams
	})
    // 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	
	onMounted(() => {
		console.log("组件完成");
	})
	onUnmounted(() => {
		console.log("组件卸载完成");
	});
	if (window.localStorage.getItem('count') == '0') {
		queryParams.user_id = String(route.query.user_id)
	}
	if (route.query.sn) {
		queryParams.sn = route.query.sn
	}
	getLists()
	window.localStorage.setItem('count', '1')
</script>
<style lang="scss" scoped>
.piker{
    width: 370px;
	::v-deep .el-input__wrapper{
		width: 240px;
	}
}
</style>